<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
          <header>
            <Row>
                <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
                    <span>还款日期(起):</span>
                    <DatePicker type="date" v-model="planCondition.paymentBeginDate" name="paymentBeginDate" placeholder="还款日期(起)" style="width: 175px" value="yyyy-MM-dd"></DatePicker>
                    <span style="width: 200px;margin-left: 10px;">-</span>
                    <span style="width: 200px;margin-left: 10px;">还款日期(止):</span>
                    <DatePicker type="date" v-model="planCondition.paymentEndDate" name="paymentEndDate"  placement="bottom-end" placeholder="还款日期(止)" style="width: 180px" value="yyyy-MM-dd"></DatePicker>
                     <span style="width: 200px;margin-left: 30px;">产品:</span>
                    <Select v-model="planCondition.productType" style="width:150px"  name="productCode" placeholder="产品">
                        <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;">状态:</span>
                    <Select v-model="planCondition.paymentStatus" style="width:150px" name="paymentStatus" placeholder="状态">
                        <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;">资金方:</span>
                    <Select v-model="planCondition.fundSource" style="width:136px" name="fundSource" placeholder="资金方" :v-model="planCondition.fundSource">
                        <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName}}</Option>
                    </Select>
                </Form>
            </Row>
             <Row style="margin-top:15px">
                    <span>实际还款日期(起):</span>
                    <DatePicker type="date" v-model="planCondition.paymentBeginDateAct" name="paymentBeginDateAct" placeholder="实际还款日期(起)" style="width: 150px" value="yyyy-MM-dd"></DatePicker>
                    <span style="width: 200px;margin-left: 10px;">-</span>
                    <span style="width: 200px;margin-left: 10px;">实际还款日期(止):</span>
                    <DatePicker type="date" v-model="planCondition.paymentEndDateAct"  name="paymentEndDateAct" placement="bottom-end" placeholder="实际还款日期(止)" style="width: 150px" value="yyyy-MM-dd"></DatePicker>
                    <Button type="primary" @click="listQuery" style="margin-left: 35px;">查询</Button>
                    <Button type="primary" @click="downLoad" style="margin-left: 20px;">下载</Button>
              </Row>
          </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="orderColumns" :data="orderData" style="width: 100%;" border></Table>
            </Row>
            <div style="margin-top: 36px;text-align: center;">
                <Page :total="planCondition.total" :current="planCondition.pageNum" :page-size="planCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>
</template>

<script>
import expandRow from './repayment-plan-query-tableExpand.vue'
export default {
  name: 'mutative-router',
  components: { expandRow },
  data () {
    return {
      planCondition: {
        paymentBeginDate: '',
        paymentEndDate: '',
        paymentBeginDateAct: '',
        paymentEndDateAct: '',
        fundSource: '',
        productType: '',
        paymentStatus: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      fundList: [],
      statusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '逾期'
        },
        {
          value: '0',
          label: '正常'
        },
        {
          value: '2',
          label: '已还款'
        }
      ],
      orderColumns: [
        {
          type: 'expand',
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '进件号',
          key: 'loanId',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '资金源',
          key: 'fundSource',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        {
          title: '客户',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '客户身份证号',
          key: 'custCardNo',
          align: 'center',
          width: 160,
          className: 'tbake'
        },
        // {
        //   title: '银行账号',
        //   key: 'bankCard',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        // {
        //   title: '开户行',
        //   key: 'bankName',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '贷款产品',
          key: 'productName',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '期限',
          key: 'loanTerm',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '期数',
          key: 'tenor',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '贷款日期',
          key: 'loanDate',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.loanDate))
            ])
          }
        },
        // {
        //   title: '贷款金额',
        //   key: 'loanAmount',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '还款日期',
          key: 'paymentDate',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDate))
            ])
          }
        },
        {
          title: '还款金额',
          key: 'paymentAmount',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        // {
        //   title: '每期还款金额（富爵）',
        //   key: 'paymentAmountPeriod',
        //   align: 'center',
        //   width: 130,
        //   className: 'tbake'
        // },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 80,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.status === '0') { // 正常
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === '1') { // 逾期
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === '2') { // 结清
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === '3') { // 提前结清
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.status === '10') { // 核销
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '实际还款日期',
          key: 'paymentDateAct',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDateAct))
            ])
          }
        },
        {
          title: '逾期费',
          key: 'overdueAmount',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '费率',
          key: 'feeRate',
          align: 'center',
          width: 80,
          className: 'tbake'
        },

        {
          title: '服务费',
          key: 'serviceFee',
          align: 'center',
          className: 'tbake'
        }
      ],
      orderData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate() + 1)
    vm.planCondition.paymentEndDate = tmpEndDate
    tmpDate.setDate(tmpDate.getDate())
    vm.planCondition.paymentBeginDate = tmpDate
    this.screenConditon()
  },
  methods: {

    pageChange: function (pageNum) {
      var vm = this
      vm.planCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.planCondition.pageSize = pageLength
      vm.listQuery()
    },
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/listScreenCondition').then(re => {
        var data = re.data
        vm.fundList.push({ 'fundCode': '', 'fundName': '请选择' })
        for (var fundLength = 0; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({ 'productType': '', 'productTypeName': '请选择' })
        for (var productLength = 0; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
      }).catch(er => {

      })
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanPayment/service/paymentPlanList', vm.planCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.planCondition.total = data.data.total
      }).catch(er => {

      })
    },
    downLoad () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/loan/loanPayment/service/downLoadPlanList'
      document.getElementById('exportList').submit()
    }
  }

}
</script>
<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
